import React from 'react'
import { Toast, NavBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { ActionBar } from 'react-vant';

// import {
//   useParams,
//   useLocation,
//   useNavigate
// } from "react-router-dom"
import withRouter from '../utils/withRouter'
function Detail({router}) {
  // const params = useParams();
  // const location = useLocation();
  // const navigate = useNavigate();
  let {navigate,location,param}=router
  const gotoShopCar=()=>{ 
    console.log(location.state);
    let data=JSON.parse(window.localStorage.getItem("shop"))||[];
    console.log(data)
    data.push(location.state);
    window.localStorage.setItem("shop",JSON.stringify(data))
  }

 
  return (
    <div>
       <NavBar
      title="详情"
      leftText="返回"
     
      onClickLeft={() => navigate(-1)}
      onClickRight={() => Toast('按钮')}
    />
      地址栏为：{param.id}
      <p>{location.state.title}</p>
      <div>
        <img src={location.state.img} alt="" />
      </div>
      <p>{location.state.price}</p>
      <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} text="客服" onClick={() => console.log('chat click')} />
        <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() => gotoShopCar()} />
        <ActionBar.Icon icon={<ShopO />} text="店铺" onClick={() => console.log('shop click')} />
        <ActionBar.Button type="danger" text="去购物车页面" onClick={() => navigate("/index/Shop")} />
      </ActionBar>
    </div>
    </div>
  )
}

export default withRouter(Detail)
// import React from 'react'
// import {
//   useParams,
//   useLocation,
//   useNavigate
// } from "react-router-dom"
// function Detail() {
//   const parms=useParams();
//   const location=useLocation();
//   const navigate=useNavigate();
//   return (
//     <div>
//       <p>{location.state.title}</p>
//       <div>
//         <img src={location.state.img} alt="" />
//       </div>
//       <p>{location.state.price}</p>
//     </div>
//   )
// }

// export default Detail